<template>
  <div class="home">
      <div class="navs">
          <el-menu
           :uniqueOpened="true"
           default-active="-1"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
            @select="menuSelect"
           >
           <el-menu-item index="-1">
              <template #title>全部</template>
            </el-menu-item>
            <el-submenu v-for="(item) in projects" :key="String(item.ID)" :index="String(item.ID)" >
              <template #title>
                <span>{{item.name}}</span>
              </template>
              <el-menu-item-group >
                <el-menu-item v-for="(child) in item.iteration" :key="`${item.ID}-${child.ID}`" :index="`${item.ID}-${child.ID}`" >{{child.name}}</el-menu-item>
                <el-menu-item><el-button type="primary" size="mini" @click="addIterations(item)">新增迭代</el-button></el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
         <div class="add">
             <el-button type="primary" size="small" @click="addProjects">创建项目</el-button>
         </div>
      </div>
      <div class="content">
        <div class="header" >
          <el-input v-model="keyword" placeholder="请输入内容" size="small" @change="onSearch"></el-input>
          <el-button type="primary" size="small" @click="addSvgs"  v-if="menu.length > 0 && menu[0] && menu[1] ">上传图标</el-button>
        </div>
        <div class="list">
          <ul class="clear">
            <li v-for="item in svgContent.list" :key="item.ID">
              <div class="svg">
                  <img :src="item._content" alt="">
              </div>
              <p class="name">{{item.name}}</p>
              <p class="iconclass" @click="copy(item)">{{item.iconClass}}</p>
              <ul class="tools">
                <li @click="seeSvg(item)"><i class="el-icon-view"></i></li>
                <li @click="svgDown(item)"><i class="el-icon-download"></i></li>
                <li @click="svgEdit(item)"><i class="el-icon-edit"></i></li>
                <li @click="svgDel(item)"><i class="el-icon-delete"></i></li>
              </ul>
            </li>
          </ul>

          
        </div>
        <div class="page-wrap">
            <el-pagination
            :hide-on-single-page="true"
            background
            layout="prev, pager, next"
            @current-change="handleCurrentChange"
            v-model:currentPage="svgContent.currentPage"
            :total="svgContent.count"
            :page-size="svgContent.pageSize"
            >
            </el-pagination>
        </div>
      </div>

      <input type="text" id="copy" ref="copyinput">
  </div>
</template>

<script>
// @ is an alias to /src
import {useAjax,addProject,getProject,getIteration,addIteration,getSvg,addSvg,delSvg} from "@/utils/api"
import { ElMessage } from 'element-plus'
import {onMounted, reactive, ref, toRaw, getCurrentInstance} from "vue"
import {initProject} from "./Hook";
import { useRoute } from 'vue-router'
export default {
  name: 'Home',
  setup(props,context){
    let projects = initProject();
    let keyword = ref("");
    let copyinput = ref()
    let menu = ref([-1,""]);
    let svgContent = reactive({list:[],pageSize:50,currentPage:1,count:0});
    // reactive里面的原始数据
    // console.log(toRaw(svgContent))
    // 获取当前的上下文实例
    const { proxy:ctx } = getCurrentInstance()

   onMounted(()=>{
     getList();
   })

    const menuSelect = async (e,k)=>{
      if(e){
         menu.value = k
         svgContent.currentPage  = 1;
         getList();
      }
    }
    const addIterations = (project)=>{
      ctx.$prompt("请输入迭代名称","提示").then( async ({ value }) => {
          if(value && value.length > 0 ){
            let res = await addIteration({name:value,pid:project.ID})
            project.iteration.unshift(res)
          }
      }).catch(()=>{})
    }
    const addProjects = ()=>{
      ctx.$prompt("请输入项目名称","提示").then( async ({ value }) => {
          if(value && value.length > 0){
            let res = await addProject({name:value})
            res.iteration = [];
            projects.value.unshift(res)
          }
      }).catch(()=>{})
    }

    const addSvgs = async ()=>{
       let [pid,iterid]  = menu.value
       pid = parseInt(pid);
       iterid = parseInt(iterid);
      if (isNaN(pid) ||isNaN(iterid)){
         ElMessage.warning("请先选择项目和迭代版本");
         return ;
       }
      let res =  await ctx.$addSvg({pid,iterid});
      if(res){
         getList();
      }
    }

    const getList = async()=>{
           let [pid,iterid]  = menu.value
            pid = parseInt(pid);
            iterid = parseInt(iterid);
      if(pid === -1){
         iterid = 0 
       }else if (isNaN(pid) ||isNaN(iterid)){
          ElMessage.warning("请先选择项目和迭代版本");
          return ;
      }
      let p = {pageSize:svgContent.pageSize,currentPage:svgContent.currentPage};
      if(keyword.value){
        p.keyword = keyword.value;
      }
      if(pid !==  -1){
        p.pid = pid;
        p.iterid = iterid;
      }
      let res = await getSvg(p);
      let list = res.list;
      for(let  i = 0; i < list.length; i++){
        let item = list[i]
        item._content = `/api/svg/img?id=${item.ID}`
      }
      svgContent.list = list;
      svgContent.pageSize  = res.pageSize ;
      svgContent.currentPage 
      svgContent.count = res.count;
    }

    const svgEdit = async (item)=>{
       let res =  await ctx.$addSvg(item);
      if(res){
         getList();
      }
    }
    const svgDel = async (item)=>{
      await delSvg({id:item.ID});
      getList();
    }

   const seeSvg = (item)=>{
     ctx.$seeSvg(item)
   }

   const svgDown = (item)=>{
      let blob = new Blob([item.content], { type:  "image/svg+xml"})
			let objectUrl = URL.createObjectURL(blob);
			var a = document.createElement('a');
			// safari doesn't support this yet
			a.href = objectUrl;
			a.download = `${item.iconClass}.svg`;
			document.body.appendChild(a);
			a.click();
			a.remove();
   }
   
   const copy = (item)=>{
     console.log(ctx)
     ctx.copyinput.value = `<SvgIcon iconClass="${item.iconClass}" />`;
     ctx.copyinput.focus();
     ctx.copyinput.select();
     document.execCommand("copy");
     ElMessage.success("复制成功");
   }
   const onSearch=()=>{
     getList();
   }
   const handleCurrentChange = (e)=>{
      getList();
   }



    return {
      copyinput,
      svgContent,
      projects,
      keyword,
      menu,
      menuSelect,
      addIterations,
      addProjects,
      addSvgs,
      svgEdit,
      svgDel,
      seeSvg,
      svgDown,
      copy,
      onSearch,
      handleCurrentChange
    }
  },
  components: {
    
  }
}
</script>
<style lang="scss">
.home{
  height: 100vh;
  width: 100vw;
  display: flex;
  background: #f6f6f6;
  .navs{
    background: rgb(84, 92, 100);
    width: 200px;
    height: 100%;
    position: relative;
    z-index: 1;
    .add{
      margin-top: 40px;
      text-align: center;
    }
    .all{
      line-height: 56px;
      padding: 0 27px;
      color: #fff;
      cursor: pointer;
      &:hover{
        background: rgb(67, 74, 80);
      }
      &.active{
        color: rgb(255, 208, 75);
      }
    }
  }
  .content{
    flex: 1;
    padding: 20px;
    .header{
      display: flex;
      justify-content: space-between;
      background: #fff;
      padding:10px;
      border-radius: 4px;
      .el-input{
        width: 280px;
      }
    }
    div.list{
      height: calc(100% - 160px);
      width: 100%;
      overflow: auto;
      background: #fff;
      margin-top: 20px;
      padding: 20px;
      >ul{
        clear: both;
        >li{
          float: left;
          width: 100px;
          height: 100px;
          background: rgba(0,0,0,0.1);
          margin: 0 0 10px 10px;
          position: relative;
          cursor: pointer;
          .svg{
              padding: 10px;
              background-position: 0 0,5px 5px;
              background-size: 10px 10px;
              background-image: linear-gradient(45deg,#eee 25%,transparent 25%,transparent 75%,#eee 75%,#eee 100%),
              linear-gradient(45deg,#eee 25%,#fff 25%,#fff 75%,#eee 75%,#eee 100%);
              width: 60px;
              height: 60px;
              margin: 0 auto 4px;
              svg{
                  display: block;
                  width: 100%;
                  height: 100%;
              }
              img{
                 display: block;
                  width: 100%;
                  height: 100%;
              }
          }
          p.name,p.iconclass{
            font-size: 12px;
            padding: 0 10px;
          }
          p.iconclass{
            &:hover{
              color: #409EFF;
            }
          }
          ul.tools{
            position: absolute;
            right: 0;
            top: 0;
            height: 100%;
            width: 20px;
            background: rgba(0,0,0,0.1);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            overflow: hidden;
            padding: 4px 0;
            text-align: center;
            display: none;
            li{
               &:hover{
                 color: #fff;
               }
            }
          }
          &:hover{
            ul.tools{
              display: flex;
            }
          }
        }
      }
    }

    div.page-wrap{
        background: #fff;
        padding-bottom:20px ;
        text-align: center;
    }

  }

  #copy{
    position: fixed;
    left: 0;
    top: 0;
    z-index: 0;
    background: transparent;
    opacity: 0;
  }
}
</style>
